<div class="m-l nav navbar-nav m-t block" style="width:300px;" >  
  <span>系统管理 ></span>  
  <span>产品设置 </span>    
</div>
<div class="m-t-lg">
  <div class="wrapper-sm">
	<div class="panel panel-default">
		<div class="panel-body">
			<div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5;text-align: right">
				
					<!-- <div class="pull-right"> -->
						<button class="btn btn-info" (click)="myModal.show();btype=1">
							新增
						</button>
					<!-- </div>		 -->	
				
			</div>
			<table class="table table-hover table-striped m-b-none default footable">
				<thead>
					<tr>
						<th>产品序号</th>
						<th>产品名称</th>
						<th>连接方式</th>
						<th>产品描述</th>	   					
	   					<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr *ngFor="let prodata of proData">				
	   					<td>{{prodata.product_number}}</td>	
	   					<td>{{prodata.product_name}}</td>
	   					<td>--</td>	
	   					<td>{{prodata.product_description}}</td>	
	   					<td>
	   						<button class="btn btn-xs btn-info" (click)="editproduct(prodata)">编辑</button>
	   						<button class="btn btn-xs btn-success">设备列表</button>
	   						<button class="btn btn-xs btn-primary" [routerLink]="['doormodel',prodata.id]">柜门模板</button>
	   						<button class="btn btn-xs btn-danger" (click)="delproduct(prodata)">删除</button>
	   					</td>
					</tr>
				</tbody>
			</table>
			<!-- <app-pagination [pageModel]="pageModel" (pageChanged)="getAll($event)"></app-pagination> -->
		</div>
	</div>
  </div>
</div>


<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px">
      <div class="modal-content">
		  <div class="modal-header">
		    <h4 class="modal-title" *ngIf="btype==1">新增产品</h4>
		    <h4 class="modal-title" *ngIf="btype==2">编辑产品</h4>
		    <h4 class="modal-title" *ngIf="btype==23">删除产品</h4>
		   <!--  <button class="close" aria-label="Close" (click)="closeModal()">
		      <span aria-hidden="true">&times;</span>
		    </button> -->
		  </div>
		  <div class="modal-body">
		    <form class="form-horizontal" *ngIf="btype!=3">
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">产品名称</label>
		          <div class="col-sm-7">
		            <input type="text"  class="form-control" placeholder="请输入产品名称" name="proname" [(ngModel)]='proname'  required="" *ngIf="btype==1">
		            <input type="text"  class="form-control"  name="proname" [(ngModel)]='productname' *ngIf="btype==2">
		          </div>
		          <div class="col-sm-2" style="color:red;margin-top: 10px;" *ngIf="btype==1">
		            <p [hidden]="proname">必填</p>
		          </div>
		        </div> 
		        <div class="form-group row">
		        	<label class="col-sm-3  control-label" style="text-align: right">连接方式</label>
		        	<div class="col-sm-7">
		        		<select class="form-control" [(ngModel)]="proconnect" name="das">
		        			<option value="0">Wifi</option>
		        			<option value="1">4G</option>
		        			<option value="2">2G</option>
		        			<option value="3">NBiot</option>
		        		</select>
		        	</div>
		        </div>
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">产品描述</label>
		          <div class="col-sm-7">
		            <input type="text"  class="form-control" placeholder="请输入产品描述" name="productdes" [(ngModel)]='prodes' *ngIf="btype==1">
		            <input type="text"  class="form-control" placeholder="请输入产品描述" name="productdes" [(ngModel)]='productdescription' *ngIf="btype==2">
		          </div>		          
		        </div> 

		        
		    </form>
		    <div *ngIf="btype==3">
		    	<h4>确定要删除产品：<strong>{{product_name}}</strong>吗？</h4>
		    </div>
		  </div>
		  <div class="modal-footer">
		    <button class="btn btn-info confirm-btn" (click)="addsave()" [disabled]="!proname" *ngIf="btype==1">保存</button>
		    <button class="btn btn-info confirm-btn" (click)="editsave()" *ngIf="btype==2">保存</button>
		    <button class="btn btn-danger confirm-btn" (click)="delsave()" *ngIf="btype==3">保存</button>
		    <button class="btn  confirm-btn " (click)="myModal.hide();cancel();">取消</button>
		  </div>
		</div>
     
    </div>
  </div>
</div>